<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/vue.js"></script>
		<link rel="stylesheet" href="./lib/bootstrap.css" />
	</head>
	<body>
		<div id="app">
			
			<comment @func="loadCont"></comment>
			<ul class="list-group">
				<li class="list-group-item" v-for="item,index in list" :key="item.index">
					<p style="display: none;">{{index+1}}</p>
					<span class="badge">评论人：{{item.user}}</span>
					{{item.text}}
				</li>
			</ul>
			
		</div>
		<template id="tmp1">
			<div>
				<div class="from-group">
					<label>评论人：</label>
					<input type="text" class="form-control" v-model="user"/>
				</div>
				<div class="from-group">
					<label>评论内容：</label>
					<textarea class="form-control" v-model="text"></textarea>
				</div>
				<div class="from-group">
					<input type="button" class="btn btn-primary" value="发表" @click="add"/>
				</div>
			</div>
		</template>
		<script>
			var comment = {
				data(){
					return {
						id:'',
						user: '',
						text: ''
					}
				},
				template: '#tmp1',
				methods:{
					add(){
						var cont = { id:this.id, user:this.user,text:this.text}
						var list =JSON.parse(localStorage.getItem('cmts') || '[]')
						list.unshift(cont)
						localStorage.setItem('cmts',JSON.stringify(list))
						this.user = this.text
						this.$emit('func')
						
					}
				}
			}
			
			var vm = new Vue({
				el: '#app',
				data: {
					list:[
						{user:'李彪',text:'我很彪'},
						{user:'黄玉东',text:'我很帅气'},
						{user:'张有量',text:'我是傻逼'}
					]
				},
				created() {
					this.loadCont()
				},
				methods: {
					loadCont(){
						var list =JSON.parse(localStorage.getItem('cmts') || '[]')
						this.list=list
					}
				},
				components: {
					comment
				}
			})
		</script>
	</body>
</html>
